[React] 副作用フックを使用してsetTimeoutのタイマーをリセットする

#React

#React Hooks

若槻龍太

2021.09.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、Reactアプリケーションで、副作用フック（useEffect）を使用してsetTimeoutのタイマーをリセットしてみました。

デモ

上記のサンドボックスを開いてから10秒経過後のコンソール出力。

TimerID 15 has started. 
10 seconds has passed. TimerID 15 has finished.

続けてRestartボタンをクリックして10秒経過後のコンソール出力。

Restart button was clicked. TimerID 15 was canceled. 
TimerID 197 has started. 
10 seconds has passed. TimerID 197 has finished.

コード概要

import React, { useState, useEffect } from 'react';

export const App: React.FC = () => {
  const [now, setNow] = useState(Date.now());

  useEffect(() => {
    const timer = setTimeout(() => {
      //some action
      console.log(
        '10 seconds has passed. TimerID ' +
          String(timer) +
          ' has finished.'
      );
    }, 10 * 1000);
    console.log('TimerID ' + String(timer) + ' has started.');

    //クリーンアップ
    return () => {
      console.log(
        'Restart button has clicked. TimerID ' + String(timer) + ' has canceled.'
      );
      clearTimeout(timer);
    };
  }, [now]);

  return (
    <>
      <div>
        ・このページを開くと10秒のカウントが開始します。
      </div>
      <div>
        ・カウントが完了すると「10 seconds has passed.」と出力されます。
      </div>
      <div>
        ・Restartボタンをクリックすると、タイマーが0秒から再開始されます。以前のタイマーはキャンセルされます。
      </div>
      <div>
        <button
          onClick={() => {
            setNow(Date.now());
          }}
        >
          Restart
        </button>
      </div>
    </>
  );
};